<script setup>
    const articleList = [
        {name: "Vue3.0新特性使用攻略", date: '2024-10-28'},
        {name: "Vite脚手架使用详解", date: '2024-10-25'},
        {name: "ElementPlus框架应用场景", date: '2024-10-17'},
        {name: "5款独立开发者必备神器", date: '2024-10-12'}
    ];
    const courseList = [
        {name:'零基础学JavaScript',price:'￥499'},
        {name:'Vue.js从入门到实战',price:'￥199'},
        {name:'深入浅出状态管理',price:'￥39.9'},
        {name:'说透大厂前端项目场景面试题',price:'￥69'}
    ];
</script>

<template>                   
     <el-container>

        <el-main>
            <el-carousel height="420px" motion-blur> <!-- motion-blur 让图片过渡带有运动模糊效果 -->
                <el-carousel-item>
                    <img src="/images/carousel1.png" style="width: 100%;"/>
                </el-carousel-item>
                <el-carousel-item>
                    <img src="/images/carousel2.png" style="width: 100%;"/>
                </el-carousel-item>
                <el-carousel-item>
                    <img src="/images/carousel3.png" style="width: 100%;"/>
                </el-carousel-item>
            </el-carousel>
            <div>
                <el-row>
                    <el-col :span="8">
                        <h2 style="width:70%;color:#a0cfff;display: inline-block;">热门文章</h2>
                        <el-button>查看更多</el-button>
                        <!-- el-skeleton :  articleList列表为空时显示 骨架，否则显示数据-->
                        <el-skeleton :rows="3" animated :loading="!articleList.length">
                            <div v-for="item in articleList">
                                <p>
                                    <b>{{item.name}}</b><br>
                                    <span style="color: green;">{{item.date}}</span>
                                </p>
                            </div>
                        </el-skeleton>
                    </el-col>
                    <el-col :span="8">
                        <h2 style="width:70%;color: #a0cfff;display: inline-block;">热门课程</h2>
                        <el-button>查看更多</el-button>
                        <el-skeleton :rows="3" animated :loading="!courseList.length">
                            <div v-for="item in courseList">                            
                                <p>
                                    <b>{{item.name}}</b><br>
                                    <span style="color: red;">{{item.price}}</span>
                                </p>
                            </div>
                        </el-skeleton>
                    </el-col>
                    <el-col :span="8">
                        <h2 style="width:70%;color: #a0cfff;display: inline-block;">热门商品</h2>
                        <el-button>查看更多</el-button>
                        <el-carousel motion-blur> <!-- motion-blur 让图片过渡带有运动模糊效果 -->
                            <el-carousel-item>
                                <img src="/images/product01.png" style="width: 50%;"/>
                            </el-carousel-item>
                            <el-carousel-item>
                                <img src="/images/product02.png" style="width: 50%;"/>
                            </el-carousel-item>
                            <el-carousel-item>
                                <img src="/images/product03.png" style="width: 50%;"/>
                            </el-carousel-item>
                            <el-carousel-item>
                                <img src="/images/product04.png" style="width: 50%;"/>
                            </el-carousel-item>
                        </el-carousel>
                    </el-col>
                </el-row>
            </div>
        </el-main>

    </el-container>
</template>

<style scoped>               
    a{text-decoration: none;}
</style>